<script lang="jsx" setup>
import dayjs from 'dayjs';
import { ref } from 'vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

const activeKey = ref('1');
const columns = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'screenNo',
    dataIndex: 'screenNo',
    title: '网板编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'recDate',
    dataIndex: 'recDate',
    title: '领取日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return dayjs(record.recDate).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'recBy',
    dataIndex: 'recBy',
    title: '领取人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'recRemark',
    dataIndex: 'recRemark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'table-cz',
  //   dataIndex: 'table-cz',
  //   title: '操作',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 100,
  //   customRender: ({ record }) => {
  //     return (
  //       <Button
  //         type="link"
  //         danger
  //         class="pl-3px pr-3px"
  //         onClick={() => {
  //           del(record, 1);
  //         }}
  //       >
  //         删除
  //       </Button>
  //     );
  //   }
  // }
];

const useColumns = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: 'LOT号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'screenNo',
    dataIndex: 'screenNo',
    title: '网板编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'userCount',
    dataIndex: 'userCount',
    title: '使用次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalCount',
    dataIndex: 'totalCount',
    title: '累计次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'useBy',
    dataIndex: 'useBy',
    title: '使用人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'useDate',
    dataIndex: 'useDate',
    title: '使用时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },

  {
    key: 'useRemark',
    dataIndex: 'useRemark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'table-cz',
  //   dataIndex: 'table-cz',
  //   title: '操作',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 100,
  //   customRender: ({ record }) => {
  //     return (
  //       <Button
  //         type="link"
  //         danger
  //         class="pl-3px pr-3px"
  //         onClick={() => {
  //           del(record, 2);
  //         }}
  //       >
  //         删除
  //       </Button>
  //     );
  //   }
  // }
];

const returnRecordColumns = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'screenNo',
    dataIndex: 'screenNo',
    title: '网板编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },

  {
    key: 'locationName',
    dataIndex: 'locationName',
    title: '归还仓位',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'inBy',
    dataIndex: 'inBy',
    title: '归还人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'inDate',
    dataIndex: 'inDate',
    title: '归还时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return dayjs(record.inDate).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'inRemark',
    dataIndex: 'inRemark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'table-cz',
  //   dataIndex: 'table-cz',
  //   title: '操作',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 100,
  //   customRender: ({ record }) => {
  //     return (
  //       <Button
  //         type="link"
  //         danger
  //         class="pl-3px pr-3px"
  //         onClick={() => {
  //           del(record, 1);
  //         }}
  //       >
  //         删除
  //       </Button>
  //     );
  //   }
  // }
];

const claimRecord = {
  recordType: 0,
  screenNo: props.rowData.screenNo
};

const useRecord = {
  recordType: 1,
  screenNo: props.rowData.screenNo
};

const returnRecord = {
  recordType: 2,
  screenNo: props.rowData.screenNo
};
</script>

<template>
  <ATabs v-model:activeKey="activeKey" class="board-management-list-tabs">
    <ATabPane key="1" tab="领取记录">
      <Table
        v-model:searchParams="claimRecord"
        :column="columns"
        row-key="recordId"
        :show-row-selection="false"
        auto-generate-uuid
        :scroll="{ y: 'auto' }"
        is-init-get-data
        class="h-full"
        url="/qms/scrscreen/bindRecord/pageList"
      ></Table>
    </ATabPane>
    <ATabPane key="2" tab="使用记录">
      <Table
        v-model:searchParams="useRecord"
        :column="useColumns"
        row-key="recordId"
        :show-row-selection="false"
        auto-generate-uuid
        :scroll="{ y: 'auto' }"
        is-init-get-data
        class="h-full"
        url="/qms/scrscreen/bindRecord/pageList"
      ></Table>
    </ATabPane>
    <ATabPane key="3" tab="归还记录">
      <Table
        v-model:searchParams="returnRecord"
        :column="returnRecordColumns"
        row-key="recordId"
        :show-row-selection="false"
        auto-generate-uuid
        :scroll="{ y: 'auto' }"
        is-init-get-data
        class="h-full"
        url="/qms/scrscreen/bindRecord/pageList"
      ></Table>
    </ATabPane>
  </ATabs>
</template>

<style lang="scss" scoped>
.board-management-list-tabs {
  height: 100%;
  &:deep(.ant-tabs) {
    .ant-tabs-nav {
      margin-bottom: 5px;
    }
  }
  :deep(.ant-tabs-content-holder) {
    height: calc(100% - 46px);
    .ant-tabs-content {
      height: 100%;
    }
  }
}
</style>
